<template>
  <div>
    <el-form :model="queryParams" v-show="showSearch" :inline="true">
      <el-form-item label="员工姓名">
        <el-input v-model="queryParams.name" placeholder="请输入员工姓名" clearable style="width: 150px" />
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="queryParams.gender" placeholder="性别" style="width: 100px">
          <el-option label="女" :value="0"></el-option>
          <el-option label="男" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" @click="openDialog">新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" border v-loading="loading">
      <el-table-column prop="name" align="center" label="姓名" width="80" />
      <el-table-column prop="gender" align="center" label="性别" width="80" />
      <el-table-column prop="deptId" align="center" label="所属部门" width="80" />
      <el-table-column prop="job" align="center" label="职位" width="80" />
      <el-table-column prop="entryDate" label="入职日期" width="120" />
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="padding-top: 15px" @size-change="findSizeChange" @current-change="findPage"
      :current-page.sync="queryParams.page" :page-sizes="[4, 6, 8]" :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <el-dialog title="新增/编辑员工" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="newEmps" :rules="rules" ref="newEmps" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="newEmps.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="newEmps.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="newEmps.gender" placeholder="请选择性别">
                <el-option label="女" :value="0"></el-option>
                <el-option label="男" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="newEmps.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="职位" prop="job">
              <el-select v-model="newEmps.job" placeholder="请选择职位">
                <el-option label="班主任" :value="1"></el-option>
                <el-option label="讲师" :value="2"></el-option>
                <el-option label="学工主管" :value="3"></el-option>
                <el-option label="教研主管" :value="4"></el-option>
                <el-option label="咨询师" :value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="薪资" prop="salary">
              <el-input v-model="newEmps.salary"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="部门" prop="deptId">
              <el-select v-model="newEmps.deptId" clearable placeholder="部门">
                <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职日期" prop="entryDate">
              <el-date-picker v-model="newEmps.entryDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" clearable style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="button-row is-justify-center">
          <el-col :span="4">
            <el-button type="primary" @click="saveOrUpdateEmp">保存</el-button>
          </el-col>
          <el-col :span="4">
            <el-button @click="dialogFormVisible = false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getEmps, save, deleteEmp, updateEmp } from '@/api/emps/index'
import { getDepts } from '@/api/depts/depts.js'

export default {
  data() {
    return {
      tableData: [],
      queryParams: { page: 1, pageSize: 8, name: '', gender: '', begin: '', end: '' },
      dateRange: [],
      showSearch: true,
      total: 0,
      loading: true,
      newEmps: { id: '', username: '', name: '', gender: '', phone: '', job: '', salary: '', deptId: '', entryDate: '' },
      deptList: [],
      dialogFormVisible: false,
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        job: [{ required: true, message: '请选择职位', trigger: 'change' }],
        salary: [{ required: true, message: '请输入薪资', trigger: 'blur' }],
        entryDate: [{ required: true, message: '请选择入职日期', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getEmps()
    this.getDepts()
  },
  methods: {
    getEmps() {
      this.loading = true
      getEmps(this.queryParams).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.loading = false
      })
    },
    findSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getEmps()
    },
    findPage() {
      this.getEmps()
    },
    handleQuery() {
      if (this.dateRange) {
        this.queryParams.begin = this.dateRange[0]
        this.queryParams.end = this.dateRange[1]
      } else {
        this.queryParams.begin = ''
        this.queryParams.end = ''
      }
      this.queryParams.page = 1
      this.getEmps()
    },
    resetQuery() {
      this.queryParams = { page: 1, pageSize: 8, name: '', gender: '', begin: '', end: '' }
      this.dateRange = []
      this.getEmps()
    },
    openDialog() {
      this.dialogFormVisible = true
      this.resetForm()
    },
    resetForm() {
      this.newEmps = { id: '', username: '', name: '', gender: '', phone: '', job: '', salary: '', deptId: '', entryDate: '' }
    },
    saveOrUpdateEmp() {
      this.$refs.newEmps.validate(valid => {
        if (valid) {
          const action = this.newEmps.id ? updateEmp : save
          action(this.newEmps).then(res => {
            if (res.code === 20000) {
              this.$message.success(this.newEmps.id ? '编辑成功' : '新增成功')
              this.dialogFormVisible = false
              this.getEmps()
            } else {
              this.$message.error(this.newEmps.id ? '编辑失败' : '新增失败')
            }
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否删除该员工?', '提示', { type: 'warning' })
        .then(() => deleteEmp(row.id))
        .then(res => {
          if (res.code === 20000) {
            this.$message.success('删除成功')
            this.getEmps()
          } else {
            this.$message.error('删除失败')
          }
        })
    },
    handleEdit(row) {
      this.dialogFormVisible = true
      this.newEmps = { ...row }
    },
    getDepts() {
      getDepts().then(res => {
        this.deptList = res.data
      })
    }
  }
}
</script>

<style scoped>
.button-row {
  margin-top: 20px;
}

.is-justify-center {
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>